<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="inc :: header('基本线型、柱型、条型图')" />
</head>
<body>
    <script>
        var datas;
        $(function () {
            FrameWH();
            $.get('/rc/getBaseLineColumnBar',function (data) {
                data = datas  = JSON.parse(data);
                $('#container').highcharts(data);
            });

        });
        function FrameWH() {
            var h = $(window).height()-80;
            $("#container").css("min-height",h+"px");
        }

        function changeCheck(value){
            alert(value);
        }
    </script>
    <div id="container" style="min-height: 600px;min-width: 600px;margin: 0 auto"></div>
    <hr/>
    <center>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="radio" name="type" value="line" title="线型图" lay-filter="type">
                    <input type="radio" name="type" value="column" title="柱型图" checked lay-filter="type">
                    <input type="radio" name="type" value="bar" title="条型图" lay-filter="type">
                </div>
            </div>

        </form>
    </center>
    <script>
        layui.use('form',function () {
            var form = layui.form;

            form.on('radio(type)',function (data) {
                var value = data.value;
                var chart = new Object();//创建对象
                chart.type = value;//自定义属性且赋值

                datas.chart = chart;//重新覆盖属性值
                $('#container').highcharts(datas);//重新加载图表   shiro(用户,角色,菜单)
            });
        });
    </script>
</body>
</html>